<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
      <el-row :gutter="10">
        <!--搜索框-->
        <el-col :span="6">
          <el-input placeholder="按姓名查询" v-model="search" class="input-with-select" @keyup.enter.native="searchdata1">
            <el-button slot="append" icon="el-icon-search" @click="searchdata"></el-button>
          </el-input>
        </el-col>
        <!--添加用户的按钮-->
        <el-col :span="6">
          <el-button type="primary" @click="addadmindialog = true" style="margin-left: 120px;">添加管理员</el-button>
        </el-col>
      </el-row>

      <!--表单模块-->
      <el-table :data="admins" highlight-current-row
                ref='table' border stripe style="margin-top: 30px;">
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column prop="adminId" label="ID" align="center"></el-table-column>
        <el-table-column prop="adminName" label="用户名" align="center"></el-table-column>
        <el-table-column prop="adminSex" label="性别" align="center"></el-table-column>
        <el-table-column prop="adminPhone" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="adminPwd" label="密码" align="center"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-tag
              type="primary"
              effect="dark"
              @click="openupdate(scope.row)"
            >编辑
            </el-tag>
            <!-- 删除 -->
            <el-tag
              type="danger"
              effect="dark"
              @click="deleteAdmin(scope.row.adminId)"
            >删除
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!--分页插件-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curpage"
      :page-sizes="[2, 4, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>

      <!-- 弹出的添加模态框 -->
      <el-dialog title="添加管理员" :visible.sync="addadmindialog" @close="clearuseradd">
        <el-form :model="addadminform" :rules="addrules" ref="addform" label-width="auto"  style="width:85%"
                 class="demo-form-inline form">
          <el-form-item prop="adminName" label="用户名" >
            <el-input v-model="addadminform.adminName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="adminSex" label="性别" >
            <el-input v-model="addadminform.adminSex" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="adminPhone" label="联系电话" >
            <el-input v-model="addadminform.adminPhone" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="adminPwd" label="密码" >
            <el-input type="password" v-model="addadminform.adminPwd" auto-complete="off" show-password></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addadmindialog = false">取 消</el-button>
          <el-button type="primary" @click="addAdmin">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog title="编辑管理员" :visible.sync="updateadmindialog" @close="closeupdate">
        <el-form :model="updateadminform" :rules="updateadminrules" ref="updateform" label-width="auto"  style="width:85%"
                 class="demo-form-inline form">
          <el-form-item prop="adminId" label="ID" >
            <el-input v-model="updateadminform.adminId" auto-complete="off" disabled ></el-input>
          </el-form-item>
          <el-form-item prop="adminName" label="用户名" >
            <el-input v-model="updateadminform.adminName" auto-complete="off" ></el-input>
          </el-form-item>
          <el-form-item prop="adminSex" label="性别" >
            <el-input v-model="updateadminform.adminSex" auto-complete="off" disabled></el-input>
          </el-form-item>
          <el-form-item prop="adminPhone" label="联系电话" >
            <el-input v-model="updateadminform.adminPhone" auto-complete="off" ></el-input>
          </el-form-item>
          <el-form-item prop="adminPwd" label="密码" >
            <el-input v-model="updateadminform.adminPwd" auto-complete="off" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateadmindialog = false">取 消</el-button>
          <el-button type="primary" @click="updateAdmin">确 定</el-button>
        </div>
      </el-dialog>
  </el-card>

</template>

<script>
  import axios from 'axios';//axios
  import Qs from 'qs';//qs
  export default {
    name:"userList",
    //绑定数据
    data() {
      return {
        admins:[],//注意使用表格时，pop属性对应的内容等价于后端数据传输的字段(键)
        curpage:1,//当前页
        pagesize:4,//每页显示条数
        total:0,//总条数
        addadmindialog:false,//默认时关闭模态框的
        updateadmindialog:false,
        addadminform:{
          adminName:"",
          adminSex:"",
          adminPhone:"",
          adminPwd:"",
        },//form表单中的数据绑定
        addrules:{
          adminName:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"用户名为必填项",trigger:'blur'},
            {min:2,max:6,message: "用户名的长度为2-6之间",trigger: 'blur'}
          ],
          adminPhone:[
            // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
            { required: true, message: '请输入手机号', trigger: 'change' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
          ],
          adminPwd:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"密码为必填项",trigger:'blur'},
            {min:3,max:6,message: "密码的长度为3-6之间",trigger: 'blur'}
          ]
        },//添加框的校验规则
        formLabelWidth:"120px",//表单标签的宽度
        updateadminform:{//修改功能数据绑定
          adminId:"",
          adminName:"",
          adminSex:"",
          adminPhone:"",
          adminPwd:""
        },
        updateadminrules:{
          adminName:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"用户名为必填项",trigger:'blur'},
            {min:2,max:6,message: "用户名的长度为2-6之间",trigger: 'blur'}
          ],
          adminPhone:[
            // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
            { required: true, message: '请输入手机号', trigger: 'change' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
          ],
          adminPwd:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"密码为必填项",trigger:'blur'},
            {min:3,max:6,message: "密码的长度为3-6之间",trigger: 'blur'}
          ]
        },//修改功能的数据校验
        search:"",//模糊查询的内容
      }
    },
    //文档加载事件,当没有任何按钮去点击触发事件时，可以使用该函数在加载时，触发事件！
    mounted() {
      this.adminList();
    },
    methods:{
      selectRow(row) { // 给操作行 高亮
        if (row) {
          this.$refs.table.setCurrentRow(row, true);  // 高亮某一行
        } else {
          this.$refs.table.setCurrentRow();  // 取消高亮
        }
      },
      //执行分页查询的函数
      adminList(curpage = 1) {
        var admins=this;
        axios.get(
          "http://localhost:1313/admin/queryAdminByPage",
          {params:{current:admins.curpage, rows: admins.pagesize,search:admins.search}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.admins = res.data.data.admins;
          this.total = res.data.data.total;
        });
      },
      // 监听 pageSize 改变的事件
      handleSizeChange (newSize) {
        //   console.log(newSize)
        //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
        this.pagesize = newSize;
        //  修改完以后，重新发起请求获取一次数据
        this.adminList();
      },
      // 监听 页码值  改变的事件
      handleCurrentChange (newPage) {
        //   console.log(newPage)
        //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
        this.curpage = newPage;
        //  修改完以后，重新发起请求获取一次数据
        this.adminList();
      },
      //添加管理员
      addAdmin() {
        var addInfo = this;
        //判断当前校验是否通过
        this.$refs.addform.validate((valid) => {
          if(valid) {
            //发送axios请求
            axios({
              headers:{'Content-Type':'application/x-www-form-urlencoded'},
              method:"post",
              url:"http://localhost:1313/admin/adminInsert",
              data:Qs.stringify(addInfo.addadminform)
            }).then((res)=>{
              console.log(res)
              if (res.data.code == 200) {
                //1.提示消息，是否添加成功
                this.$message({
                  message: res.data.msg,
                  type:"success",
                });
                //2.关闭模态框
                this.addadmindialog=false;
                //3.刷新页面<==>再次执行adminList
                this.adminList();
              } else {
                this.$message.error(res.data.msg)
              }
            })
          }
        });
      },
      //关闭添加管理员的模态框
      clearuseradd() {
        // 重置表单内容
        this.$refs.addform.resetFields();
      },
      openupdate(data){
        console.log(data)
        //打开模态框
        this.updateadmindialog=true;
        //数据回显
        this.updateadminform = data;
      },
      //修改管理员
      updateAdmin() {
        var updateInfo = this;
        axios({
          headers:{'Content-Type':'application/x-www-form-urlencoded'},
          method:"post",
          url:"http://localhost:1313/admin/adminUpdate",
          data:Qs.stringify(updateInfo.updateadminform)
        }).then((res)=>{
          if (res.data.code == 200) {
            this.$message({
              message:res.data.msg,
              type:"success"
            });
            this.updateadmindialog = false;
            this.adminList()
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      //关闭修改的模态框
      closeupdate() {
        this.$refs.updateform.resetFields();
      },
      //删除管理员
      deleteAdmin(data){
        console.log(data)
        //询问窗口
        this.$confirm("是否删除该管理员？","提示",{
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning",
        }).then(()=>{
          //发送请求到后端
          axios.get(
            "http://localhost:1313/admin/adminDelete",
            {params:{adminId:data}}
          ).then((res)=>{
            if (res.data.code == 200) {
              this.$message({
                type:"success",
                message:res.data.msg
              });
              this.curpage = 1;//重新设置当前页面
              this.adminList();//刷新页面
            }else{
              this.$message.error(res.data.msg);
            }
          })
        }).catch(()=>{
          this.$message({
            type:"info",
            message:"已取消删除"
          })
        })
      },
      //模糊查询
      searchdata(){
        this.curpage = 1;
        //回调分页查询，增加分页查询的参数
        this.adminList();
        this.search ="";
      },
      // 按下回车键实现搜索
      searchdata1(e){
        var keyCode = window.event? e.keyCode:e.which;
        console.log("回车搜索", keyCode, e);
        if (keyCode == 13) {
          this.curpage = 1;
          //回调分页查询，增加分页查询的参数
          this.adminList();
          this.search ="";
        }
      }
    }
  }

</script>

<style>
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color:  rgba(227, 189, 241, 0.76) !important;
    color: #fff;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }

  .el-button--info.is-plain {
    color: #704141;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .el-button--mini {
    font-size: 14px;
    border-radius: 3px;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
